<template>
  <div>
    <!-- el过渡动画 -->
    <transition name="el-fade-in-linear">
      <!-- 导航栏 -->
      <div v-show="toolbar.visible"
           @mouseenter="hoverEnter = true"
           @mouseleave="hoverEnter = false"
           :class="[{ enter: toolbar.enter }, { hoverEnter: (hoverEnter || this.$route.path === '/favorite' || this.$route.path === '/travel') && !toolbar.enter }]"
           class="toolbar-content myBetween">
        <!-- 网站名称 -->
        <div class="toolbar-title">
          <h2 @click="$router.push({path: '/'})">{{$store.state.webInfo.webName}}</h2>
        </div>

        <!-- 手机导航按钮 -->
        <div v-if="$common.mobile() || mobile"
             class="toolbar-mobile-menu"
             @click="toolbarDrawer = !toolbarDrawer"
             :class="{ enter: toolbar.enter }">
          <i class="el-icon-s-operation"></i>
        </div>




        <!-- 导航列表 -->
        <div v-else>
          <ul class="scroll-menu">
            <li @click="$router.push({path: '/'})">
              <div class="my-menu">
                🏡 <span>Home</span>
              </div>
            </li>

<!--            <li v-for="(menu, index) in $store.getters.navigationBar"-->
<!--                @click="$router.push({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"-->
<!--                :key="index">-->
<!--              <div class="my-menu">-->
<!--                📒 <span>StudyNote</span>-->
<!--             </div>-->
<!--          </li>-->

            <el-dropdown :hide-timeout="500" placement="bottom">
              <li>
                <div class="my-menu">📒 <span>StudyNote</span></div>
              </li>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(sort, index) in sortInfo"
                    :key="index"
                  >
                    <div
                      @click="
                        $router.push({
                          path: '/sort',
                          query: { sortId: sort.id },
                        })
                      "
                    >
                      {{ sort.sortName }}
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

            <li>
              <div class="my-menu">
                💋 <span>Lover</span>
                <el-dropdown placement="bottom">
                  <i class="el-icon-arrow-down el-icon--right" style="margin-left: 5px;"></i>
                  <el-dropdown-menu slot="dropdown">
<!--                    <el-dropdown-item @click.native="$router.push({path: '/love'})">-->
                    <el-dropdown-item @click.native="$router.push({path: '/tiaozhuan'})">
                      <i aria-hidden="true"></i> <span><svg t="1709474210864" class="icon" viewBox="0 0 1128 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10060" width="18" height="18"><path d="M1093.683999 584.697729c-50.851974 208.006567-178.948296 364.494686-315.175602 404.816368-122.764529 42.654342-295.248027 21.660408-456.801349-67.580473C79.976892 788.238919-45.920066 552.24044 41.054805 394.885905c71.512671-129.495918 264.79016-165.285577 465.865396-99.437936 87.774639-193.277489 245.529059-311.576642 389.554112-275.986925C1071.157175 62.648565 1159.664935 315.708782 1093.683999 584.697729z" fill="#FF8D8C" p-id="10061"></path><path d="M643.547392 1023.970808c-104.369844 0-221.069459-31.190988-328.305142-90.373888-119.232217-65.914289-214.737955-158.287599-268.988947-259.924899-55.184056-103.770017-61.182322-205.007433-16.861795-285.250915 36.656076-66.64741 103.503428-111.101233 193.277489-129.562565 82.176257-16.861795 179.948007-9.597227 276.986636 19.994223C593.16195 82.842731 756.114867-28.991623 899.740036 6.664741c181.547545 44.853707 274.387387 305.645023 206.606971 581.298711-50.985269 208.539746-178.281822 371.226074-324.306297 414.480243a424.277413 424.277413 0 0 1-138.493318 21.527113zM316.50855 276.720047c-120.43187 0-219.136684 43.720701-263.790449 124.630656-39.988446 72.04585-33.723589 164.219218 17.061737 259.9249 51.851685 97.305219 143.625169 185.812979 258.392009 249.194666 151.889448 83.975737 322.773407 109.568342 445.937821 66.64741 135.62748-39.988446 258.591951-199.009166 306.578086-395.419084 63.914866-261.391142-19.994223-507.71997-187.479164-549.108011C759.780475-0.599827 605.824958 109.834932 519.05003 300.979704l-4.931909 10.863528-11.396707-3.732255a602.759177 602.759177 0 0 0-186.212864-31.39093z" fill="#03016C" p-id="10062"></path><path d="M191.344714 806.433662s669.006702-126.630079 644.946988-778.241808a190.744888 190.744888 0 0 1 185.346447 86.641634c69.913133 107.235683 219.936453 520.183036-205.740555 847.555114 0-0.133295-328.171847 126.563432-624.55288-155.95494z" fill="#FE6A66" p-id="10063"></path><path d="M81.909667 525.848066s16.328615-182.347314 171.950318-189.211998c0 0 32.723878 1.599538 25.99249 28.858329s-35.856307 12.329771-47.452956 14.39584-75.978047 13.329482-96.638745 116.099789c0 0 9.397285 37.589139-24.592894 50.985269s-29.258213-21.127229-29.258213-21.127229z" fill="#FFFFFF" p-id="10064"></path><path d="M323.173291 326.572309c-13.329482 7.531157-14.92902 33.656942 11.59665 41.854574s60.715791-22.460177 37.655787-36.589428-35.656364-12.86295-49.252437-5.265146z" fill="#FFFFFF" p-id="10065"></path><path d="M643.547392 1023.970808c-104.369844 0-221.069459-31.190988-328.305142-90.373888-119.232217-65.914289-214.737955-158.287599-268.988947-259.924899-55.184056-103.770017-61.182322-205.007433-16.861795-285.250915 36.656076-66.64741 103.503428-111.101233 193.277489-129.562565 82.176257-16.861795 179.948007-9.597227 276.986636 19.994223C593.16195 82.842731 756.114867-28.991623 899.740036 6.664741c181.547545 44.853707 274.387387 305.645023 206.606971 581.298711-50.985269 208.539746-178.281822 371.226074-324.306297 414.480243a424.277413 424.277413 0 0 1-138.493318 21.527113zM316.50855 276.720047c-120.43187 0-219.136684 43.720701-263.790449 124.630656-39.988446 72.04585-33.723589 164.219218 17.061737 259.9249 51.851685 97.305219 143.625169 185.812979 258.392009 249.194666 151.889448 83.975737 322.773407 109.568342 445.937821 66.64741 135.62748-39.988446 258.591951-199.009166 306.578086-395.419084 63.914866-261.391142-19.994223-507.71997-187.479164-549.108011C759.780475-0.599827 605.824958 109.834932 519.05003 300.979704l-4.931909 10.863528-11.396707-3.732255a602.759177 602.759177 0 0 0-186.212864-31.39093z" fill="#03016C" p-id="10066"></path></svg> 伊人</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push({path: '/photoWall'})">
                      <i aria-hidden="true"></i> <span>📸 照片墙</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push({path: '/timeline'})">
                      <i aria-hidden="true"></i> <span>📪 时光轴</span>
                    </el-dropdown-item>

                    <el-dropdown-item @click.native="$router.push({path: '/vidio'})">
                      <i aria-hidden="true"></i> <span>
                      <svg t="1710509128356" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3088" width="16" height="16"><path d="M21.333329 405.333462l981.333129 0 0 597.333209-981.333129 0 0-597.333209Z" fill="#9FDBAD" p-id="3089"></path><path d="M959.9998 426.666791a21.333329 21.333329 0 0 1 21.333329 21.333329v511.999893a21.333329 21.333329 0 0 1-21.333329 21.333329H63.999987a21.333329 21.333329 0 0 1-21.333329-21.333329V448.00012a21.333329 21.333329 0 0 1 21.333329-21.333329h895.999813m0-42.666658H63.999987a63.999987 63.999987 0 0 0-63.999987 63.999987v511.999893a63.999987 63.999987 0 0 0 63.999987 63.999987h895.999813a63.999987 63.999987 0 0 0 63.999987-63.999987V448.00012a63.999987 63.999987 0 0 0-63.999987-63.999987z" fill="#5C2D51" p-id="3090"></path><path d="M66.986653 407.040129a15.999997 15.999997 0 0 1-15.359997-11.946665L21.333329 281.600155a15.999997 15.999997 0 0 1 11.519997-19.626663L951.679802 21.333542h4.053332a15.999997 15.999997 0 0 1 15.359997 11.946664l29.653327 113.49331a15.999997 15.999997 0 0 1-11.519997 19.626663L71.039985 406.613462z" fill="#FFFFFF" p-id="3091"></path><path d="M951.893135 43.946871l27.093328 103.253312L70.826652 384.000133l-26.879994-102.613312L951.893135 43.946871M955.733134 0.000213a37.333326 37.333326 0 0 0-9.386664 1.28L27.946661 241.493496a37.333326 37.333326 0 0 0-26.666661 45.439991l29.653327 113.49331A37.333326 37.333326 0 0 0 76.373317 426.666791L994.986459 186.880174a37.333326 37.333326 0 0 0 26.666661-45.653323L991.999793 27.946874A37.333326 37.333326 0 0 0 955.733134 0.000213z" fill="#5C2D51" p-id="3092"></path><path d="M177.493296 224.426833l78.933317-20.693329 9.173332 151.893302-78.933317 20.693329-9.173332-151.893302z" fill="#F05071" p-id="3093"></path><path d="M236.799951 230.826832l6.399998 108.586644-36.906659 9.599998-6.399998-108.586644 36.906659-9.599998m39.466658-54.399989L155.306634 208.213503l11.519998 195.413293 120.959975-31.573327-11.519998-195.413292z" fill="#5C2D51" p-id="3094"></path><path d="M369.919923 174.080177l78.933317-20.693329 8.959998 152.106635-78.933317 20.479996-8.959998-151.893302z" fill="#F05071" p-id="3095"></path><path d="M429.013244 180.693509l6.399999 108.586644-36.693326 9.386665-6.399999-108.586644 36.906659-9.599998M469.333236 126.29352L347.519928 157.866847l11.519997 195.413293 120.959975-31.573327-10.666664-195.413293z" fill="#5C2D51" p-id="3096"></path><path d="M562.133216 123.733521l78.933317-20.693329 9.173332 152.106635-79.146651 20.693329-8.959998-152.106635z" fill="#F05071" p-id="3097"></path><path d="M621.439871 130.346853l6.399998 108.586644-36.906659 9.599998-6.399998-108.586644 36.906659-9.599998M661.333196 75.946864L539.946554 106.666858l11.519998 195.413292 120.959975-31.573326L661.333196 75.946864z" fill="#5C2D51" p-id="3098"></path><path d="M754.559843 73.386865l78.719983-20.479996 9.173332 151.893302-78.933317 20.693329-8.959998-152.106635z" fill="#F05071" p-id="3099"></path><path d="M813.653164 80.000197l6.399998 108.586644-36.906658 9.599998-6.399999-108.586644 36.906659-9.599998M853.333156 25.600208l-121.173309 31.573327 11.519998 195.413292 120.959975-31.573326L853.333156 25.600208z" fill="#5C2D51" p-id="3100"></path><path d="M429.013244 842.026705a42.666658 42.666658 0 0 1-42.666658-42.666658v-189.866627a42.666658 42.666658 0 0 1 42.666658-42.666658 42.666658 42.666658 0 0 1 21.333329 5.759999l165.973299 94.933313a42.666658 42.666658 0 0 1 0 74.666651l-165.973299 94.079981a42.666658 42.666658 0 0 1-21.333329 5.759999z" fill="#FDCA89" p-id="3101"></path><path d="M429.013244 587.306758a21.333329 21.333329 0 0 1 10.666664 2.986666l165.973299 94.933313a21.333329 21.333329 0 0 1 0 37.759992l-165.973299 94.933314a21.333329 21.333329 0 0 1-10.666664 2.986666 21.333329 21.333329 0 0 1-21.333329-21.333329v-189.866627a21.333329 21.333329 0 0 1 21.333329-21.333329m0-42.666658a63.999987 63.999987 0 0 0-63.999987 63.999987v189.866627a63.999987 63.999987 0 0 0 96.426647 55.893322l165.973299-94.933314a63.999987 63.999987 0 0 0 0-111.786643l-165.973299-94.933314a63.999987 63.999987 0 0 0-31.78666-8.533331z" fill="#5C2D51" p-id="3102"></path></svg>
                      视频墙</span>
                    </el-dropdown-item>

                    <el-dropdown-item @click.native="$router.push({path: '/travel'})">
                      <i aria-hidden="true"></i> <span>🌏 记录</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>


            <!-- 恋爱驿站 -->
<!--            <li @click="$router.push({path: '/love'})">-->
<!--              <div class="my-menu">-->
<!--                💋 <span>伊人</span>-->
<!--              </div>-->
<!--            </li>-->
            <!--  -->

            <!-- 旅拍 -->
<!--            <li @click="$router.push({path: '/travel'})">-->
<!--              <div class="my-menu">-->
<!--                🌏 <span>记录最美的你</span>-->
<!--              </div>-->
<!--            </li>-->

<!--            <li @click="$router.push({path: '/photoWall'})">-->
<!--              <div class="my-menu">-->
<!--                📸 <span>照片墙</span>-->
<!--              </div>-->
<!--            </li>-->


            <!-- 思语 -->
            <li @click="openBook()">
              <div class="my-menu">
                <svg t="1710551675569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6058" width="30" height="15"><path d="M984.544 604.736l38.944-95.168-38.944-92.896V315.904L911.808 243.2l-39.744-94.848-93.248-38.144-71.232-71.264h-102.848L509.568 0l-92.896 38.944H315.904L243.2 111.648 148.352 151.424 110.208 244.672 38.944 315.904v102.816L0 513.888l38.944 92.928v100.768l72.704 72.704 39.776 94.848 93.248 38.144 71.232 71.264h102.848l95.136 38.944 92.928-38.944h100.768l72.704-72.736 94.848-39.744 38.144-93.248 71.264-71.232z" fill="#F0D04D" p-id="6059"></path><path d="M685.92 197.888A1280.352 1280.352 0 0 0 228.768 878.176a662.72 662.72 0 0 0 44.96-16.096A1280.544 1280.544 0 0 1 688.032 253.536a649.792 649.792 0 0 0-2.112-55.648z" fill="#B18C25" p-id="6060"></path><path d="M569.312 472a448.608 448.608 0 0 0 230.08-68.64 450.24 450.24 0 0 0-28.8-270.016C496.448 223.104 310.848 477.856 305.376 762.464c44.416 5.088 90.304 3.648 136.512-5.216 151.904-29.12 271.264-131.232 328.832-263.04a683.968 683.968 0 0 1-201.408-22.208z" fill="#FFFFFF" p-id="6061"></path><path d="M356.512 775.616c-17.408 0-35.008-0.992-52.32-2.976l-9.248-1.056 0.192-9.312A686.4 686.4 0 0 1 767.392 123.648l8.832-2.912 3.712 8.544c13.728 31.552 23.936 64.416 30.336 97.76 11.36 59.36 11.072 119.36-0.864 178.368l-0.864 4.288-3.712 2.336a457.12 457.12 0 0 1-157.824 62.112c-3.296 0.64-6.592 1.216-9.888 1.792 43.872 7.04 88.608 9.76 133.216 8.032l16.288-0.64-6.528 14.944a461.856 461.856 0 0 1-423.584 277.344z m-40.672-22.368a441.632 441.632 0 0 0 438.72-248.384c-3.456 0.064-6.912 0.064-10.368 0.064-59.968 0-119.712-7.744-177.536-23.072l-70.336-18.624 72.736-1.504a436.896 436.896 0 0 0 221.12-64.736c10.592-55.008 10.56-110.88-0.032-166.144a443.392 443.392 0 0 0-25.344-84.8A666.112 666.112 0 0 0 315.84 753.248z" fill="#CFA41E" p-id="6062"></path><path d="M375.68 775.616c-17.408 0-35.008-0.992-52.32-2.976l-9.248-1.056 0.192-9.312A686.496 686.496 0 0 1 786.56 123.616l8.832-2.912 3.712 8.544c13.728 31.52 23.936 64.416 30.336 97.76 11.36 59.328 11.072 119.36-0.864 178.368l-0.864 4.288-3.712 2.336a457.12 457.12 0 0 1-157.824 62.112c-3.296 0.64-6.592 1.216-9.888 1.792a682.848 682.848 0 0 0 133.216 8.064l16.288-0.64-6.528 14.944a461.856 461.856 0 0 1-423.584 277.344z m-40.704-22.368a441.632 441.632 0 0 0 438.72-248.384 694.976 694.976 0 0 1-187.872-23.008l-70.336-18.624 72.736-1.504a436.896 436.896 0 0 0 221.12-64.736 437.664 437.664 0 0 0-0.032-166.144 443.392 443.392 0 0 0-25.344-84.8 666.144 666.144 0 0 0-448.992 607.2z" fill="#B18C25" p-id="6063"></path><path d="M770.592 133.344a450.24 450.24 0 0 1 28.8 270.016 447.424 447.424 0 0 1-230.08 68.64c30.592 8.096 61.888 14.112 93.696 17.888 35.36 4.224 71.36 5.696 107.712 4.32-57.568 131.776-176.928 233.92-328.832 263.04a450.976 450.976 0 0 1-136.512 5.216c5.472-284.608 191.072-539.36 465.216-629.12" fill="#FFFFFF" p-id="6064"></path><path d="M356.512 775.616c-17.408 0-35.008-0.992-52.32-2.976l-9.248-1.056 0.192-9.312A686.4 686.4 0 0 1 767.392 123.648l28-2.912-15.424 8.544c13.728 31.52 23.936 64.416 30.336 97.76 11.36 59.328 11.072 119.36-0.864 178.368l-0.864 4.288-3.712 2.336a457.12 457.12 0 0 1-157.824 62.112c-3.296 0.64-6.592 1.216-9.888 1.792a682.848 682.848 0 0 0 133.216 8.064l16.288-0.64-6.528 14.944a461.856 461.856 0 0 1-423.616 277.312z m-40.672-22.368a441.632 441.632 0 0 0 438.72-248.384 694.976 694.976 0 0 1-187.872-23.008l-70.336-18.624 72.736-1.504a436.896 436.896 0 0 0 221.12-64.736 437.664 437.664 0 0 0-0.032-166.144 443.392 443.392 0 0 0-25.344-84.8A666.08 666.08 0 0 0 315.84 753.248z" fill="#B18C25" p-id="6065"></path><path d="M703.648 218.976c-203.68 172.48-361.472 392.832-458.72 653.856l78.624-30.016c75.328-238.688 186.144-416.192 380.64-573.856 0.064-18.432 0.928-31.36-0.544-49.984z" fill="#B18C25" p-id="6066"></path><path d="M702.08 192.544A1280.224 1280.224 0 0 0 244.928 872.8a662.72 662.72 0 0 0 44.96-16.096A1280.544 1280.544 0 0 1 704.192 248.16c0.064-18.432-0.64-36.992-2.112-55.616z" fill="#EDEEEE" p-id="6067"></path></svg>
<!--                💬-->
                <span>Vision</span>
              </div>
            </li>
            <!-- 烟花 -->
            <li @click="openNewTab()">
              <div class="my-menu">
                🎆<span>FireWork</span>
<!--                <span>浪漫烟花</span>-->
              </div>
            </li>
            <!-- 聚宝盆 -->
            <li @click="$router.push({path: '/favorite'})">
              <div class="my-menu">
                🧰 <span>Favorites</span>
<!--                🧰 <span>收藏夹</span>-->
              </div>
            </li>
            <!-- 聊天室
            <li @click="goIm()">
              <div class="my-menu">
                💬 <span>非礼勿言</span>
              </div>
            </li>
            -->
            <!-- 时光轴 -->
<!--            <li @click="$router.push({path: '/timeline'})">-->
<!--              <div class="my-menu">-->
<!--                📪 <span>时间轴</span>-->
<!--              </div>-->
<!--            </li>-->


            <li>
              <div class="my-menu">
                🎮 <span>Games</span>
                <el-dropdown placement="bottom">
                  <i class="el-icon-arrow-down el-icon--right" style="margin-left: 5px;"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push({path: '/game?pc'})">
                      <i aria-hidden="true"></i> <span>🎮随机电脑游戏</span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push({path: '/game?wap'})">
                      <i aria-hidden="true"></i> <span>🎮随机手机游戏</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>
            <!-- 音乐 -->
            <li @click="$router.push({path: '/funny'})">
              <div class="my-menu">
                🎺 <span>Artist</span>
              </div>
            </li>
            <li>
              <div class="my-menu">
                🐟 <span>About</span>
                <el-dropdown placement="bottom">
                  <i class="el-icon-arrow-down el-icon--right" style="margin-left: 5px;"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push({path: '/message'})">
                      <i aria-hidden="true"></i> <span> 📪 <span>留言</span></span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push({path: '/friend'})">
                      <i aria-hidden="true"></i> <span> 💃 <span>人脉</span></span>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push({path: '/about'})">
                      <i aria-hidden="true"></i> <span>  🐟 <span>介绍</span></span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </li>
            <!-- 留言 -->
<!--            <li @click="$router.push({path: '/message'})">-->
<!--              <div class="my-menu">-->
<!--                📪 <span>留言</span>-->
<!--              </div>-->
<!--            </li>-->
<!--            &lt;!&ndash; 人脉 &ndash;&gt;-->
<!--            <li @click="$router.push({path: '/friend'})">-->
<!--              <div class="my-menu">-->
<!--                💃 <span>人脉</span>-->
<!--              </div>-->
<!--            </li>-->
<!--            &lt;!&ndash; 关于 &ndash;&gt;-->
<!--            <li @click="$router.push({path: '/about'})">-->
<!--              <div class="my-menu">-->
<!--                🐟 <span>关于</span>-->
<!--              </div>-->
<!--            </li>-->
            <!-- 个人中心 -->
            <li>
              <el-dropdown placement="bottom">
                <el-avatar class="user-avatar" :size="36"
                           style="margin-top: 12px"
                           :src="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar">
                </el-avatar>

                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="$router.push({path: '/user'})"
                                    v-if="!$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-user-circle" aria-hidden="true"></i> <span>个人中心</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="logout()" v-if="!$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-sign-out" aria-hidden="true"></i> <span>退出</span>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="$router.push({path: '/user'})"
                                    v-if="$common.isEmpty($store.state.currentUser)">
                    <i class="fa fa-sign-in" aria-hidden="true"></i> <span>Login..</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
    </transition>

    <div id="main-container">
      <router-view></router-view>
    </div>

    <!-- 回到顶部按钮 -->
    <div href="#" class="cd-top" v-if="!$common.mobile()" @click="toTop()"></div>

    <div class="toolButton">
      <div class="backTop" v-if="$common.mobile() && toolButton" @click="toTop()">
        <!-- 回到顶部按钮 -->
        <svg viewBox="0 0 1024 1024" width="50" height="50">
          <path
            d="M696.741825 447.714002c2.717387-214.485615-173.757803-312.227566-187.33574-320.371729-10.857551 5.430775-190.050127 103.168727-187.33274 320.371729-35.297037 24.435488-73.306463 65.1623-67.875688 135.752376 5.430775 70.589076 76.018851 119.460051 103.168726 116.745664 27.152875-2.716387 19.004713-21.7221 19.004713-21.7221l8.148162-38.011425s40.721814 59.732525 51.583363 59.732525h146.609927c13.574938 0 51.585363-59.732525 51.585363-59.732525l8.147162 38.011425s-8.147162 19.005713 19.004713 21.7221c27.148876 2.714388 97.738951-46.156588 103.168727-116.745664s-32.57965-111.316888-67.876688-135.752376z m-187.33574-2.713388c-5.426776 0-70.589076-2.717387-78.733239-78.737238 2.713388-73.306463 73.306463-78.733239 78.733239-81.450626 5.430775 0 76.02385 8.144163 78.736238 81.450626-8.143163 76.019851-73.305463 78.737238-78.736238 78.737238z m0 0"
            fill="#000000"></path>
          <path
            d="M423.602441 746.060699c6.47054-6.297579 12.823107-7.017417 21.629121-2.784372 34.520213 16.582259 70.232157 19.645568 107.031855 9.116944 8.118169-2.323476 15.974396-5.475765 23.598677-9.22392 13.712907-6.73648 26.003134 0.8878 26.080116 16.13936 0.109975 22.574907-0.024994 45.142816 0.080982 67.709725 0.031993 7.464316-2.277486 13.322995-9.44387 16.608254-7.277358 3.333248-13.765895 1.961558-19.526595-3.264264-3.653176-3.313253-7.063407-6.897444-10.634601-10.304675-6.563519-6.259588-6.676494-6.25259-10.625603 1.603638-8.437097 16.80121-16.821205 33.623415-25.257302 50.423625-2.489438 4.953882-5.706713 9.196925-11.411426 10.775569-8.355115 2.315478-15.772442-1.070758-20.272427-9.867774-8.774021-17.15313-17.269104-34.453228-25.918153-51.669344-3.750154-7.469315-3.9891-7.479313-10.141712-1.514658-3.715162 3.602187-7.31435 7.326347-11.142486 10.800563-5.571743 5.060858-11.934308 6.269586-18.936728 3.207277-6.82746-2.984327-9.869774-8.483086-9.892769-15.685462-0.070984-23.506697-0.041991-47.018393-0.020995-70.532089 0.007998-4.679944 1.46467-8.785018 4.803916-11.538397z"
            fill="#000000"></path>
        </svg>
      </div>

      <el-popover placement="left"
                  :close-delay="500"
                  trigger="hover">
        <div slot="reference">
          <i class="fa fa-cog iconRotate" aria-hidden="true"></i>
        </div>
        <div class="my-setting">
          <div>
            <!-- 太阳按钮 -->
            <i v-if="isDark" class="el-icon-sunny iconRotate" @click="changeColor()"></i>
            <!-- 月亮按钮 -->
            <i v-else class="fa fa-moon-o" aria-hidden="true" @click="changeColor()"></i>
          </div>
          <div>
            <i class="fa fa-snowflake-o" aria-hidden="true" @click="changeMouseAnimation()"></i>
          </div>
        </div>
      </el-popover>
    </div>

    <!-- 点击动画 -->
    <canvas v-if="mouseAnimation" id="mousedown"
            style="position:fixed;left:0;top:0;pointer-events:none;z-index: 1000">
    </canvas>

    <el-drawer :visible.sync="toolbarDrawer"
               :show-close="false"
               size="65%"
               custom-class="toolbarDrawer"
               title="欢迎光临"
               direction="ltr">
      <div>
        <ul class="small-menu">
          <li @click="smallMenu({path: '/'})">
            <div>
              🏡 <span>首页</span>
            </div>
          </li>

          <li v-for="(menu, index) in $store.getters.navigationBar"
              @click="smallMenu({path: '/sort', query: {sortId: menu.id, labelId: menu.labels[0].id}})"
              :key="index">
            <div>
              📒 <span>学习记录</span>
            </div>
          </li>
          <!-- 照片墙 -->
          <li @click="smallMenu({path: '/photoWall'})">
            <div>
              📸 <span>照片墙</span>
            </div>
          </li>
          <!-- 恋爱驿站 -->
          <li @click="smallMenu({path: '/love'})">
            <div>
              💋 <span>恋爱驿站</span>
            </div>
          </li>

          <!-- 旅拍 -->
          <li @click="smallMenu({path: '/travel'})">
            <div>
              🌏 <span>旅拍</span>
            </div>
          </li>

          <!-- 聚宝盆 -->
          <li @click="smallMenu({path: '/favorite'})">
            <div>
              🧰 <span>聚宝盆</span>
            </div>
          </li>

          <!-- 聊天室
          <li @click="goIm()">
            <div>
              💬 <span>非礼勿言</span>
            </div>
          </li>
           -->
          <!-- 音乐 -->
          <li @click="smallMenu({path: '/funny'})">
            <div>
              🎺 <span>乐库</span>
            </div>
          </li>
          <!-- 留言 -->
          <li @click="smallMenu({path: '/message'})">
            <div>
              📪 <span>留言</span>
            </div>
          </li>
          <!-- 人脉 -->
          <li @click="smallMenu({path: '/friend'})">
            <div>
              💃 <span>人脉</span>
            </div>
          </li>
           <!-- 烟花 -->
            <li @click="openNewTab()">
              <div class="my-menu">
                🎆<span>烟花</span>
              </div>
            </li>
          <!-- 关于 -->
          <li @click="smallMenu({path: '/about'})">
            <div>
              🐟 <span>关于</span>
            </div>
          </li>

          <template v-if="$common.isEmpty($store.state.currentUser)">
            <li @click="smallMenu({path: '/user'})">
              <div>
                <i class="fa fa-sign-in" aria-hidden="true"></i>
                <span>&nbsp;登录</span>
              </div>
            </li>
          </template>
          <template v-else>
            <li @click="smallMenu({path: '/user'})">
              <div>
                <i class="fa fa-user-circle" aria-hidden="true"></i>
                <span>&nbsp;个人中心</span>
              </div>
            </li>
            <li @click="smallMenuLogout()">
              <div>
                <i class="fa fa-sign-out" aria-hidden="true"></i>
                <span>&nbsp;退出</span>
              </div>
            </li>
          </template>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>

  import mousedown from '../utils/mousedown';

  export default {
    data() {
      return {
        toolButton: false,
        hoverEnter: false,
        mouseAnimation: false,
        isDark: false,
        scrollTop: 0,
        toolbarDrawer: false,
        mobile: false
      }
    },
    mounted() {
      if (this.mouseAnimation) {
        mousedown();
      }
      window.addEventListener("scroll", this.onScrollPage);
      if (this.isDaylight()) {
        this.isDark = true;
        let root = document.querySelector(":root");
        root.style.setProperty("--background", "#272727");
        root.style.setProperty("--fontColor", "white");
        root.style.setProperty("--borderColor", "#4F4F4F");
        root.style.setProperty("--borderHoverColor", "black");
        root.style.setProperty("--articleFontColor", "#E4E4E4");
        root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
        root.style.setProperty("--commentContent", "#D4D4D4");
        root.style.setProperty("--favoriteBg", "#1e1e1e");
      }
    },
    destroyed() {
      window.removeEventListener("scroll", this.onScrollPage);
    },
    watch: {
      scrollTop(scrollTop, oldScrollTop) {
        //如果滑动距离超过屏幕高度三分之一视为进入页面，背景改为白色
        let enter = scrollTop > window.innerHeight / 2;
        const top = scrollTop - oldScrollTop < 0;
        let isShow = scrollTop - window.innerHeight > 30;
        this.toolButton = isShow;
        if (isShow && !this.$common.mobile()) {
          if (window.innerHeight > 950) {
            $(".cd-top").css("top", "0");
          } else {
            $(".cd-top").css("top", window.innerHeight - 950 + "px");
          }
        } else if (!isShow && !this.$common.mobile()) {
          $(".cd-top").css("top", "-900px");
        }

        //导航栏显示与颜色
        let toolbarStatus = {
          enter: enter,
          visible: top,
        };
        this.$store.commit("changeToolbarStatus", toolbarStatus);
      },
    },
    created() {
      let toolbarStatus = {
        enter: false,
        visible: true,
      };
      this.$store.commit("changeToolbarStatus", toolbarStatus);
      this.getWebInfo();
      this.getSortInfo();

      this.mobile = document.body.clientWidth < 1100;

      window.addEventListener('resize', () => {
        let docWidth = document.body.clientWidth;
        if (docWidth < 1100) {
          this.mobile = true;
        } else {
          this.mobile = false;
        }
      });
    },
    computed: {
      sortInfo() {
        return this.$store.state.sortInfo;
      },
      toolbar() {
        return this.$store.state.toolbar;
      }
    },
    methods: {
      smallMenu(data) {
        this.$router.push(data)
        this.toolbarDrawer = false;
      },
       openNewTab() {
          window.open('https://fireworks.nianbroken.top/', '_blank');
        },
        openBook() {
          window.open('http://toiforyuo.lofter.com', '_blank');
        },

      smallMenuLogout() {
        this.logout();
        this.toolbarDrawer = false;
      },

      goIm() {
        if (this.$common.isEmpty(this.$store.state.currentUser)) {
          this.$message({
            message: "请先登录！",
            type: "error"
          });
        } else {
          let userToken = this.$common.encrypt(localStorage.getItem("userToken"));
          window.open(this.$constant.imBaseURL + "?userToken=" + userToken + "&defaultStoreType=" + localStorage.getItem("defaultStoreType"));
        }
      },
      logout() {
        this.$http.get(this.$constant.baseURL + "/user/logout")
          .then((res) => {
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
        this.$store.commit("loadCurrentUser", {});
        localStorage.removeItem("userToken");
        this.$router.push({path: '/'});
      },
      getWebInfo() {
        this.$http.get(this.$constant.baseURL + "/webInfo/getWebInfo")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.$store.commit("loadWebInfo", res.data);
              localStorage.setItem("defaultStoreType", res.data.defaultStoreType);
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      getSortInfo() {
        this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.$store.commit("loadSortInfo", res.data);
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      changeColor() {
        this.isDark = !this.isDark;
        let root = document.querySelector(":root");

        if (this.isDark) {
          root.style.setProperty("--background", "#272727");
          root.style.setProperty("--fontColor", "white");
          root.style.setProperty("--borderColor", "#4F4F4F");
          root.style.setProperty("--borderHoverColor", "black");
          root.style.setProperty("--articleFontColor", "#E4E4E4");
          root.style.setProperty("--articleGreyFontColor", "#D4D4D4");
          root.style.setProperty("--commentContent", "#D4D4D4");
          root.style.setProperty("--favoriteBg", "#1e1e1e");
        } else {
          root.style.setProperty("--background", "white");
          root.style.setProperty("--fontColor", "black");
          root.style.setProperty("--borderColor", "rgba(0, 0, 0, 0.5)");
          root.style.setProperty("--borderHoverColor", "rgba(110, 110, 110, 0.4)");
          root.style.setProperty("--articleFontColor", "#1F1F1F");
          root.style.setProperty("--articleGreyFontColor", "#616161");
          root.style.setProperty("--commentContent", "#F7F9FE");
          root.style.setProperty("--favoriteBg", "#f7f9fe");
        }
      },
      toTop() {
        window.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      },
      onScrollPage() {
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      },
      isDaylight() {
        let currDate = new Date();
        if (currDate.getHours() > 22 || currDate.getHours() < 7) {
          return true;
        } else {
          return false;
        }
      },
      changeMouseAnimation() {
        this.mouseAnimation = !this.mouseAnimation;
        if (this.mouseAnimation) {
          this.$nextTick(() => {
            mousedown();
          });
        }
      }
    }
  }

</script>

<style scoped>
.toolbar-content {
  width: 100%;
  height: 60px;
  color: var(--white);
  /* 固定位置，不随滚动条滚动 */
  position: fixed;
  z-index: 100;
  /* 禁止选中文字 */
  user-select: none;
  transition: all 0.3s ease-in-out;
}

.toolbar-content.enter {
  background: var(--toolbarBackground);
  color: var(--toolbarFont);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
}

.toolbar-content.hoverEnter {
  background: var(--translucent);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
}

.toolbar-title {
  margin-left: 30px;
  cursor: pointer;
}

.toolbar-mobile-menu {
  font-size: 30px;
  margin-right: 15px;
  cursor: pointer;
}

.scroll-menu {
  margin: 0 25px 0 0;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.scroll-menu li {
  list-style: none;
  margin: 0 12px;
  font-size: 17px;
  height: 60px;
  line-height: 60px;
  position: relative;
  cursor: pointer;
}

.scroll-menu li:hover .my-menu span {
  color: var(--themeBackground);
}

.scroll-menu li:hover .my-menu i {
  color: var(--themeBackground);
  animation: scale 1.5s ease-in-out infinite;
}

.scroll-menu li .my-menu:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 6px;
  background-color: var(--themeBackground);
  width: 100%;
  max-width: 0;
  transition: max-width 0.25s ease-in-out;
}

.scroll-menu li:hover .my-menu:after {
  max-width: 100%;
}

.sortMenu {
  margin-left: 44px;
  font-size: 17px;
  position: relative;
}

.sortMenu:after {
  top: 32px;
  width: 35px;
  left: 0;
  height: 2px;
  background: var(--themeBackground);
  content: "";
  border-radius: 1px;
  position: absolute;
}

.el-dropdown {
  font-size: unset;
  color: unset;
}

.el-popper[x-placement^="bottom"] {
  margin-top: -8px;
}

.el-dropdown-menu {
  padding: 5px 0;
}

.el-dropdown-menu__item {
  font-size: unset;
}

.el-dropdown-menu__item:hover {
  background-color: var(--white);
  color: var(--themeBackground);
}

.toolButton {
  position: fixed;
  right: 3vh;
  bottom: 3vh;
  animation: slide-bottom 0.5s ease-in-out both;
  z-index: 100;
  cursor: pointer;
  font-size: 25px;
  width: 30px;
}

.my-setting {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  cursor: pointer;
  font-size: 20px;
}

.my-setting i {
  padding: 5px;
}

.my-setting i:hover {
  color: var(--themeBackground);
}

.cd-top {
  background: var(--toTop) no-repeat center;
  position: fixed;
  right: 5vh;
  top: -900px;
  z-index: 99;
  width: 70px;
  height: 900px;
  background-size: contain;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

.backTop {
  transition: all 0.3s ease-in;
  position: relative;
  top: 0;
  left: -13px;
}

.backTop:hover {
  top: -10px;
}

#outerImg {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10;
  width: 100%;
  height: 100%;
  display: none;
}

@media screen and (max-width: 400px) {
  .toolButton {
    right: 0.5vh;
  }
}
</style>
